<template>
	<view>
		<view class="bg">
			<image src="@/static/8c7398129c13f67abeca14982fc8883.jpg"></image>
		</view>
		<view style="color: white;font-size: 22px;position: relative;top: -180px;text-align: center;">
			<span>欢迎来到车联网服务平台用户端</span>
		</view>
		<view class="car">
			<image src="@/static/7fd1b81f3c559caabc335ad7ef2ef2f.png"></image>
		</view>
		<view class="content">
			<u-form :model="form" ref="uForm">
				<u-form-item><u-input v-model="loginForm.username" type="text" placeholder="手机号登陆"
						style="border-top: none;border-right: none;border-left: none;border-radius: 0;" /></u-form-item>
				<!-- <u-form-item><u-input v-model="form.verify" placeholder="请输入验证码"
						style="border-top: none;border-right: none;border-left: none;border-radius: 0;" />
					<u-button size="small" style="border-radius: 22px;" slot="right" type="primary"
						@click="getCode">获取验证码</u-button></u-form-item> -->
			
			<u-form-item><u-input v-model="loginForm.password" type="password" placeholder="密码"
					style="border-top: none;border-right: none;border-left: none;border-radius: 0;" /></u-form-item>
			
			
			<u-form-item><u-input v-model="loginForm.code" type="text" placeholder="验证码"
					style="border-top: none;border-right: none;border-left: none;border-radius: 0;" />
					
					<image style="width: 100rpx; height: 60rpx;" :src="codeUrl" @click="getCode"></image>
					</u-form-item>
			
			
			
			
			
			
			
			</u-form>
			<span style="color: #2486b9;">立即注册></span>
			<u-button @click="denglu" shape="circle" type="primary" style="margin-top: 20px;">登录</u-button>
		</view>

	</view>
</template>

<script>




	export default {
		data() {
			return {
				codeUrl:'',
				loginForm: {
					code: "",
					password: "admin123",
					username: "admin",
					uuid: "",

				},



				form: {
					phone: '',
					verify: ''
				},
				tips: '',
				// refCode: null,
				seconds: 60,
			}
		},
		onReady() {
			// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
			// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
			// this.refCode = this.$refs.uCode;
		},
		
		onLoad() {
			this.getCode()
		},
		methods: {
			
			getCookie(name) {
			    const nameEQ = name + "=";
			    const cookies = document.cookie.split(';');
			    for (let i = 0; i < cookies.length; i++) {
			        let c = cookies[i].trim();
			        if (c.indexOf(nameEQ) === 0) {
			            return decodeURIComponent(c.substring(nameEQ.length));
			        }
			    }
			    return null;
			},
			
			
			 setCookie(name, value, days) {
			    const date = new Date();
			    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
			    const expires = "expires=" + date.toUTCString();
			    document.cookie = name + "=" + encodeURIComponent(value) + ";" + expires + ";path=/";
			},
			
			
			 decodeJWT(token) {
				 let that=this
			    const parts = token.split('.');
			    if (parts.length !== 3) {
			        throw new Error('Invalid token format');
			    }
			
			    // 解码 Base64URL 的 Header 和 Payload
			    const header = JSON.parse(atob(parts[0]));
			    const payload = JSON.parse(atob(parts[1]));
			
			    // 确保 payload 是字符串后存入 Cookie
			    that.setCookie('userid', JSON.stringify(payload.user_id), 7);
				if(payload != null && payload.user_id != null){
					uni.setStorageSync('userId',payload.user_id)
				}
			
			    console.log("Cookie 已设置:", payload);
				 console.log(that.getCookie('userid'));
			},
			
			
			
		// 	 decodeJWT(token) {
		// 	    const parts = token.split('.');
		// 	    if (parts.length !== 3) {
		// 	        throw new Error('Invalid token format');
		// 	    }
			
		// 	    // 解码 Base64URL 的 Header 和 Payload
		// 	    const header = JSON.parse(atob(parts[0]));
		// 	    const payload = JSON.parse(atob(parts[1]));
			
		
		// 	 setCookie('userid', payload);
			 
		// 	 console.log("cokkkkk")
		// 	},
			
			
			
			// denglu(){
			// 	let that=this
			// 	this.$http({
			// 		url:'/api/auth/login',
			// 		method:'post',
			// 		data:that.loginForm,
			// 		success(res){
			// 			if(res.data.code==200){
			// 				uni.setStorageSync("token",res.data.data.access_token)
			// 				console.log("登陆成功")
			// 				console.log(res.data.data.access_token)
			// 				that.decodeJWT(res.data.data.access_token)
							
			// 				uni.navigateTo({
			// 					url:'../shouye/shouye'
			// 				});	
			// 			}
			// 		}
			// 	})
			// },
			
			
			denglu() {
			  let that = this;
			  this.$http({
			    url: '/api/auth/login',
			    method: 'post',
			    data: that.loginForm,
			    success: function(res) {
			      if (res.data.code == 200) {
			        uni.setStorageSync("token", res.data.data.access_token);
			        console.log("登录成功");
			        console.log(res.data.data.access_token);
			        that.decodeJWT(res.data.data.access_token);
			
			        // 使用绝对路径跳转
			        uni.switchTab({
			          url: '../shouye/shouye'
			        });
			      }
			    }
			  });
			},
			
			
			
			
			getCode(){
				let that=this
				this.$http(
				{
					url:'api/code',
					method:'GET',
					success(res){
					
						  that.codeUrl = "data:image/gif;base64," + res.data.img;
						  that.loginForm.uuid = res.data.uuid;
						
					}
					
					
				}
				)
				
				
			},
			
			codeChange(text) {
				this.tips = text;
			},
		
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 24rpx;
	}

	.bg image {
		width: 100%;
	}

	.car {
		position: relative;
		top: -152px;
		left: 116px;
		z-index: 2;
	}

	.content {
		position: relative;
		width: 100%;
		top: -200px;
		height: 100vh;
		border-radius: 28px;
		background-color: white;
		padding: 60px 60px;
		box-sizing: border-box;
	}

	.car image {
		width: 42%;
		height: 226rpx;
	}
</style>